﻿@{
    Layout = "_QuartzNetUILayout";
}
<div>
    <el-container>
        <el-main>
            <div id="lineMarkerDiv" style="width:100%;min-height:480px;"></div>
            @* <div id="cAreaStackDiv" style="width:100%;min-height:480px;" v-if="cAreaStackData.show"></div> *@
        </el-main>
    </el-container>
</div>
@section Scripts{
    <script type="text/javascript" src="~/wwwroot/js/echarts.min.js"></script>
    <script>
        new Vue({
            el: "#main",
            data: {
                activeIndex: '3',
                lineMarkerData: {
                    day: [],
                    series: [],
                },
                cAreaStackData: {
                    day: [],
                    series: []
                }
            },
            created() {
                // setInterval(() => { this.initData();}, 15000);
            },
            mounted: function () {
                this.initData();
            },
            methods: {
                initData() {
                    var that = this;
                    axios("/job/periodData/" + 0).then(function (res) {
                        that.lineMarkerData.day = res.data.item1;
                        that.lineMarkerData.series = res.data.item2;
                        that.lineMarkerFunc("lineMarkerDiv");

                        // that.cAreaStackData = { day: res.data.item3, series = res.data.item4 };
                        // that.cAreaStackFunc("cAreaStackDiv");
                    });
                },
                cAreaStackFunc(byId) {
                    var that = this;
                    option = {
                        title: { text: '作业执行次数' },
                        tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } },
                        legend: { data: that.cAreaStackData.day },
                        toolbox: { feature: { saveAsImage: {} } },
                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                        xAxis: [{ type: 'category', boundaryGap: false, data: that.cAreaStackData.day }],
                        yAxis: [{ type: 'value' }],
                        series: that.cAreaStackData.series
                    };
                    this.ShowChart(byId, option);
                },
                lineMarkerFunc(byId) {
                    var that = this;
                    option = {
                        title: { text: '执行次数' }, tooltip: { trigger: 'axis' }, legend: {},
                        toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } },
                        xAxis: { type: 'category', boundaryGap: false, data: that.lineMarkerData.day },
                        yAxis: { type: 'value', axisLabel: { formatter: '{value}次' } },
                        series: that.lineMarkerData.series
                    };
                    this.ShowChart(byId, option);
                },
                ShowChart(byId, option) {
                    var chartDom = document.getElementById(byId);
                    var myChart = echarts.init(chartDom);
                    option && myChart.setOption(option);
                }
            }
        });
    </script>
}
